<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人注册页面</title>
    <link rel="stylesheet" href="./css/app.css">
</head>
<body>
<div class="reg-body">
<!--使用固定的栅格系统开始-->
<div class="container">
    <!--顶部行开始-->
    <div class="row">
        <div class="col-md-1 ul">
            <img src="./img/logo.png" alt="">
        </div>
        <div class="col-md-4 ul">
            <p>欢迎注册</p>
        </div>
        <div class="col-md-4 col-md-offset-3 ul">
            <span>我已经注册过团队用户，现在就<a href="">登录</a></span>
        </div>
    </div>
    <!--顶部行结束-->
    <!--注册类型行开始-->
    <div class="row leixing">
        <div class="col-md-6 ul" style="color:#fe4343;background: white;">
            个人注册
        </div>
        <div class="col-md-6 ul" style="background: white;">
            团队注册
        </div>
    </div>
    <!--注册类型行结束-->
    <!--表单行开始-->
    <div class="row hang">
        <div class="col-md-12" style="background: white">
            <!--表单开始-->
            <form class="form-horizontal" role="form" method="post" name="myform">
                <div class="form-group">
                    <label for="firstname" class="col-sm-2 control-label">手机注册</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="firstname" placeholder="请输入手机号码">
                    </div>
                </div>
                <div class="form-group">
                    <label for="lastname" class="col-sm-2 control-label">输入验证</label>
                    <div class="col-sm-4" style="float: left">
                        <input style="width: 300px" type="text" class="form-control" id="lastname" placeholder="请输入右边的验证码">
                    </div>
                        <img src="./img/seccode.jpeg" alt="" >
                    <a href="">看不请？点击换一张</a>

                </div>
                <div class="form-group">
                    <label for="lastname" class="col-sm-2 control-label">短信验证</label>
                    <div class="col-sm-4">
                        <input style="width: 300px" type="text" class="form-control" id="lastname" placeholder="请输入手机收到的验证码">

                    </div>
                    <!--点击获取短信验证-->
                    <input type="button" class="btn btn-success" value="获取手机验证码"  id="phone_btn" name="phone" onclick="showtime(30)">

                    <!--点击获取短信验证-->
                </div>
                <div class="form-group">
                    <label for="lastname" class="col-sm-2 control-label">真实姓名</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="lastname" placeholder="请输入您的真实姓名">
                    </div>
                </div>
                <div class="form-group">
                    <label for="lastname" class="col-sm-2 control-label">设置密码</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="lastname" placeholder="请设置您的密码">
                    </div>
                </div>

                <!--所在区域开始-->
                <div class="form-group">
                    <label for="lastname" class="col-sm-2 control-label">所在区域</label>
                    <div class="col-sm-2">
                    <select class="form-control col-sm-2" style="width: 150px">
                        <option value="">请选择所在省份</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                    </div>
                    <div class="col-sm-2">
                    <select class="form-control col-sm-2" style="width: 150px">
                        <option value="">请选择所在城市</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                    </div>
                        <div class="col-sm-2">
                        <select class="form-control col-sm-2" style="width: 150px">
                            <option value="">请选择所在县城</option>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                        </div>
                    <div class="col-sm-2">
                        <select class="form-control col-sm-2" style="width: 150px">
                            <option value="">请选择所在城镇</option>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </div>
                </div>
                <!--所在区域结束-->
                <!--专业开始-->
                <div class="form-group">
                    <label for="lastname" class="col-sm-2 control-label">选择专业</label>
                    <div class="col-sm-2">
                    <select class="form-control">
                        <option value="">专业设计</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                    </div>
                </div>
                <!--专业结束-->
                <!--选择省份开始-->
                <div class="form-group">
                    <label for="lastname" class="col-sm-2 control-label">选择身份</label>
                    <div class="col-sm-2">
                        <select class="form-control">
                            <option value="">专业设计</option>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </div>
                </div>
                <!--选择省份结束-->








                <div class="form-group">
                    <label for="lastname" class="col-sm-2 control-label">工作邮箱</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="lastname" placeholder="请输入你经常使用的邮箱">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox">我已同意<a href="">《服务条款》</a>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-danger btn-lg">开始注册隔个人账号</button>
                    </div>
                </div>
            </form>
            <!--表单结束-->
        </div>
    </div>
    <!--表单行结束-->
</div>
<!--使用固定的栅格系统结束-->
</div>

<script>
    var secs = 30;
    document.agree.agreeb.disabled=true;
    for(var i=1;i<=secs;i++) {
        window.setTimeout("update(" + i + ")", i * 1000);
    }
    function update(num) {
        if(num == secs) {
            document.agree.agreeb.value =" 我 同 意 ";
            document.agree.agreeb.disabled=false;
        }
        else {
            var printnr = secs-num;
            document.agree.agreeb.value = "请认真查看<服务条款和声明> (" + printnr +")";
        }
    }

    function showtime(t){
        document.myform.phone.disabled=true;
        for(i=1;i<=t;i++) {
            window.setTimeout("update_p(" + i + ","+t+")", i * 1000);
        }

    }

    function update_p(num,t) {
        if(num == t) {
            document.myform.phone.value =" 重新发送 ";
            document.myform.phone.disabled=false;
        }
        else {
            printnr = t-num;
            document.myform.phone.value = " (" + printnr +")秒后重新发送";
        }
    }

</script>





</body>
<script src="./js/jquery/jquery.js"></script>
<script src="./js/bootstrap/bootstrap.js"></script>
<script src="./js/app.js"></script>
<script>

</script>
</html>